<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>"/>
		<meta charset="UTF-8">
		
		<title>注册</title>
		<style type="text/css">
			*{
				font-family:"Microsoft Yahei"!important;
			}
			#top{
				width:1200px;
				border-bottom:1px solid #666;
				margin:0px auto;		
			}
			#middle{
				width:1200px;
				overflow:hidden;
				padding-top:50px;
			}
			#middle .left{
				float:left;
				margin-left:150px;
				padding-top:30px;
			}
			#middle .right{
				
				width:438px;
				overflow：hidden;
				float:right;
				margin-right:50px;
			}
			.right .shang{
				
				overflow:hidden;
				border-bottom:2px solid #B81E20;
			}
			.right .shang p{
				color:#A2A2A2;
				margin:0px;
				margin-bottom:6px;
				
			}
			.right .shang .zuo{
				float:left;
				font-size:20px;
			}
			.right .shang .you{
				float:right;
				margin-top:3px;
			}
			.you a{
				color:#B81E20;
				margin-left:5px;
				font-size:14px;
				text-decoration: none;	
			}
			.you a:hover{
				text-decoration: underline;
			}
			form{
				margin-top:40px;
			}
			form input{
				width:260px;
				height:43px;
				font-size:14px;
				text-indent: 10px;
				color:#000;
				float:left;		
			}
			form span{
				border:1px solid #A2A2A2;
				height:47px;
				width:150px;
				margin-left:20px;
				display:inline-block;
				
			}
			
			.phone span{
				background-color:#F5F5F5;
			}
			.fasong{
				color:#b52024;
				font-size:12px;
				text-align:center;
				line-height:47px;
				cursor: pointer;
				
			}
			
			.fasong:hover{
				text-decoration: underline;
			}
			form p{
				overflow:hidden;
			}
			.phoneyz input,.password input,.pwd input,.name input{
				width:433px;
				
			}
			.read{
				font-size:12px;
				color:#ACACAC;
				margin-top:25px;
			}
			.read a{
				color:#b52024;
				text-decoration: none;
			}
			.read a:hover{
				text-decoration: underline;
			}
			.read input{
				height:15px;
				width:15px;
				
			}
			.submit input{
				border:0px;
				background-color:#9A9A9A;
				width:436px;
				height:50px;
				cursor: pointer;
			}
			.submit a input{
				color:#fff;
				font-size:18px;
				text-align:center;
			}
			.submit a:hover input{
				text-decoration: underline;
			}
			#bottom{
				width:1200px;
				font-size:12px;
				color:#ACACAC;
				text-align:center;
				margin-top:70px;
			}
			#logo{
				width:1200px;
				margin:0px 50px;
				
				overflow:hidden;
				
			}
			#logo ul{
				overflow:hidden;
				margin-left:280px;
			}
			#logo li{
				float:left;
				list-style: none;
				margin-right:20px;
			}
			#idcode{
			    display: block;
			  
			    position:absolute;
			    top: 210px;
			    right:353px;
			    z-index: 10;
			    border:1px solid #A2A2A2;
			}
			#ehong-code-tip-ck{
				width:100px;
				position:absolute;
				top:15px;
				right:-130px;
				overflow:hidden;
				height:20px;
				border:0px;
				cursor: pointer;
				text-decoration: underline;
				color:#b52024;
			}
			
			.ehong-idcode-val {
			    position: relative;
			    padding: 1px 4px 1px 4px;
			    top: 0px;
			    left: 10px;
			    letter-spacing: 4px;
			    display: inline;
			    cursor: pointer;
			    font-size: 28px;
			    font-family: "Courier New", Courier, monospace;
			    text-decoration: none;
			    font-weight: bold;
			}
		</style>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.idcode.js"></script>
		
		<script type="text/javascript">
		  var isnameExists=false;
		 //验证手机号是否合法
        function checkphone() {
        	
            var phone=$(".phone1").val();
            if(phone==null){
               	alert("手机号码不能为空");
                return false;
            }
           
            if(phone.length<11){
                alert("手机号码不能小于11位数");
                return false;
            }
            return true;
        }
        //验证用户名是否合法
        function checkname() {
          
            var name=$(".name1").val();
            if(name==""){
            	$(".wenzi").html("用户名不能为空");
            	$(".wenzi").css("color","red");
                return false;
            }
          //发送异步请求，验证学生是否存在
			var v=$(this).val();
			$.post("checkname.shtml",{name:v},function(data){
				if(data=="false"){
					$(".wenzi").html("");
					$(".wenzi").css("color","red")
					isnameExists=false;
				}else{
					$(".wenzi").html("该名称已被占用");
					$(".wenzi").css("color","red");
					isnameExists=true;
					
				}
			});
            return true;
        }
        
        //验证密码是否合法
        function checkpassword() {
           var mima=$(".mima").val();
            if(mima==null){
               alert("密码不能为空");
                return false;
            }
            
             if(mima.length<6){
               alert("密码不能小于6位数");
                return false;
            }
            return true;
        }
        
        //验证再次输入密码是否合法
       function checkqueren(){
          var pwd=$(".pwd1").val();
           var mima=$(".mima").val();
          
           if(pwd==null){
               alert("请再次输入密码");
               return false;
           }
           if(mima!=pwd){
              alert("请保持与原密码一致");
               return false;
           }
           return true;
       }
			        
			        /*  function checkAll(){
			        	 	var pwd=$(".pwd1").val();
				        	var mima=$(".mima").val();
				        	var name=$(".name1").val();
				        	var phone=$(".phone1").val();
				            if(phone=="" && pwd=="" && mima=="" && name==""){
				            	alter("请仔细填写");
				            	return false;
				            }
				            return true;
			         } */
			         
			         
			        
		 $(function(){
				 $.idcode.setCode();
		         var IsBy = $.idcode.validateCode();
		            //获取的验证码
		            console.log(IsBy);
		             $('#Txtidcode').blur(function(){
		                var IsBy1 = $.idcode.validateCode();
		              
		                if(IsBy1!=true)
		                {
		                    alert('验证码输入不正确');
		                    return false;
		                }
		                
           			 });
           			
           			 $(".fasong").click(function(){
		               	//shijian=setInterval(daoji);
		               	var daoji=60;
		              	var shijian=setInterval(function(){
		            	$(".fasong").html(daoji+"s之后重试");
			            if(daoji<1)
			            {
			                $(".fasong").html('请点击重试');
			            }
			            if(daoji==59)
			            {
			                $(".yanzheng").val(parseInt(Math.random()*10000));
			            }
			            daoji--;
		            },1000);
		            }); 
		               
			       /*  $(".phone1").bind("blur",checkphone);
			        $(".name1").bind("blur",checkname);
			         $(".mima").bind("blur",checkpassword);
			         $(".pwd1").bind("blur",checkqueren); */
			         
			        
			        /* $("#submit").click(function(){
			        	 var allValid=checkAll();
			        	 var phoneValid=checkphone();
			        	 var nameValid=checkname();
			        	 var passwordValid=checkpassword();
			        	 var pwdValid=checkqueren();
			        	 if(phoneValid==true&&nameValid==true&&passwordValid==true&&pwdValid==true&&allValid==true){
			        	 	 return true;
			        	 	
			        	 }
			        	
			        	  	/* console.log(phoneValid);
			        	 	 console.log(nameValid);
			        	 	 console.log(passwordValid);
			        	 	 console.log(pwdValid); */
			        	/*  return false; */
			        	 	
		           
					/*  }); */
        			 });
			       
			$(function(){
				$("#submit").mouseover(function(){
					$(this).css("backgroundColor","red");
					
				})
				$("#submit").mouseout(function(){
					$(this).css("backgroundColor","#9A9A9A");
					
				})
				 $(".phone1").bind("blur",checkphone);
		         $(".name1").bind("blur",checkname);
		         $(".pwd1").bind("blur",checkqueren);
				$("#submit").click(function(){
					var check=$("input[type='checkbox']").is(':checked');
					if(check==true){
						
						var pwd=$(".pwd1").val();
			        	var name=$(".name1").val();
			        	var phone=$(".phone1").val();
			        	var mima=$(".mima").val();
			        	var pwd1=$(".pwd1").val();
			             if(name==""){
			             	$(".wenzi").html("用户名不能为空");
			             	$(".wenzi").css("color","red");
			                 return false;
			             }
			        	if(phone==""){
			        		$(".phone").html("手机号不能为空");
			        		$(".phone").css("color","red");
			        		return false;
			        	}

			            if(phone.length<11){
			                alert("手机号码不能小于11位数");
			                return false;
			            }
			        	if(mima==""){
			        		$(".mima1").html("密码不能为空");
			        		$(".mima1").css("color","red");
			        		return false;
			        	 }else if(mima!=""){
			        		 $(".mima1").html(" ");
			        	 }
			        	if(mima.length<6){
			                alert("密码不能小于6位数");
			                 return false;
			             }
			        	if(pwd1==""){
			        		$(".pwd2").html("确认密码不能为空");
			        		$(".pwd2").css("color","red");
			        		return false;
			        	 }else{
			        		 $(".pwd2").html(" ");
			        	 }
			        	 if(pwd==""&&name==""&&phone==""){
			 		    	alert("请仔细填写");
			 		    	return false;
			 		    } 
				        var phoneValid=checkphone();
				     	var nameValid=checkname();
				        var passwordValid=checkpassword();
				        var pwdValid=checkqueren();
				        if(phoneValid==true&&nameValid==true&&pwdValid==true&&checkpassword==true){
				        	 return true;
				        	 	
				         }
				        return false;
					} else{   
						 return false;
					}
				});
				
				//给表单添加一个基础的表单验证和异步请求验证
				$("#zhuce").bind("submit",function(){
					if (isnameExists==true) {
						$(".name1")[0].focus();
						alert("该用户已被占用，请重新输入");
						return false;
					}
					
					return true;
				});
				
				
			});
			
		</script>

  </head>
  
  <body>
    	<div id="top">
    		<p><img src="images/zhuce/logo_new.jpg"></p>
    	</div>
    	<div id="middle">
    		<div class="left">
    			<img src="images/zhuce/login120412_newlogo(1).jpg">
    		</div>
    		<div class="right">
    			<div class="shang">
    				<p class="zuo">注册新用户</p>
    				<p class="you">我已经注册，现在就<a href="denglu.jsp">登录</a></p>
    			</div>
    			<form action="zhuce.shtml" id="zhuce" method="post">
    			
    				<p class="yanzhengma">
                          <input type="text" id="Txtidcode" class="yanzhengma" placeholder="验证码" autocomplete="off" />
                          
                          <span id="idcode"></span>
                    </p>
                   
                    <p class="phone">
                          <input type="text" id="Txtidcode" class="phone1" name="userphone" placeholder="请输入手机号" autocomplete="off" />
                          <a class="phone"></a>
                          <span class="fasong">获取短信验证码</span>
                         <!--  <span id="idcode"></span> -->
                    </p>
                    <p class="phoneyz">
                    	 <input type="text" id="Txtidcode" class="yanzheng" placeholder="填写手机验证码" autocomplete="off" />
                    </p>
                      <p class="name">
                    	 <input type="text" id="Txtidcode" class="name1" name="username" placeholder="请输入用户名" autocomplete="off"/>
                    	 <a class="wenzi"></a>
                    </p>
                     <p class="password">
                    	 <input type="password" id="Txtidcode" class="mima"  placeholder="设定登录密码" autocomplete="off" />
                    	  <a class="mima1"></a>
                    </p>
                     <p class="pwd">
                    	 <input type="password" id="Txtidcode" class="pwd1" name="userpassword" placeholder="再次输入密码" autocomplete="off" />
                    	  <a class="pwd2"></a>
                    </p>
                     <p class="read">
                    	 <input type="checkbox" id="Txtidcode" class="txtVerification" />请阅读<a href="">《VANCL凡客诚品服务条款》</a>
                    </p>
                    <input type="hidden" value="<%= request.getParameter("from") %>" name="from" />
                     <p class="submit">
                    	 <a href=""><input type="submit"  id="submit" class="txtVerification" value="立即注册"/></a>
                    </p>
    			</form>
    		</div>
    	</div>
    	<div id="bottom">
    		Copyright 2007 - 2016 vancl.com All Rights Reserved 京ICP证100557号 京公网安备11010102000579号 出版物经营许可证新出发京批字第直110138号
    	</div>
    	<div id="logo">
    		<ul>
    			<li><img style="width:100px;" src="images/zhuce/xin.png" ></li>
    			<li><img style="width:130px;" src="images/zhuce/danwei.jpg"></li>
    			<li><img style="width:100px;" src="images/zhuce/jiaoyi.jpg"></li>
    			<li><img style="width:100px;" src="images/zhuce/beian.jpg"></li>
    		</ul>
    	</div>
  </body>
</html>
